<template>
  <div class="cooperate">
    <div class="operate-top flex-between flex-align-items-center">
      <div class="tab-nav-container flex flex-align-items-center">
        <p v-for="(item, index) in statusList" :key="index" class="font-12 pointer"
          :class="{ active: item.value === form.status }" @click="statusChange(item.value)">
          {{ `${item.name}(${item.count})` }}
        </p>
      </div>
      <div class="search">
        <el-input v-model="form.keyword" type="text" placeholder="搜索" maxlength="20" />
        <p class="pointer flex-center flex-align-items-center">
          <i class="iconfont icon-sousuo"></i>
        </p>
      </div>
    </div>

    <div class="screen flex flex-wrap">
      <el-popover placement="bottom-start" :width="118" trigger="click" :show-arrow="false"
        @show="selectShowChange('platform', true)" @hide="selectShowChange('platform', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.platform > 0, active: selectShow.platformShow }">
            <span class="font-14">{{ form.platform > 0 ? data.platformList.find(item => item.value === form.platform).name
              : '平台' }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <radio-popup :list="data.platformList" :checked="form.platform"
          @change="e => selectChange(e, 'platform')"></radio-popup>
      </el-popover>
      <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
        @show="selectShowChange('catesShow', true)" @hide="selectShowChange('catesShow', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.cates.length > 0, active: selectShow.catesShow }">
            <span class="font-14">分类{{ form.cates.length > 0 ? `(${form.cates.length})` : '' }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <checkbox-popup :list="cateList" :checked="form.cates" @change="e => selectChange(e, 'cates')"></checkbox-popup>
      </el-popover>
      <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
        @show="selectShowChange('areasShow', true)" @hide="selectShowChange('areasShow', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.areas.length > 0, active: selectShow.areasShow }">
            <span class="font-14">国家{{ form.areas.length > 0 ? `(${form.areas.length})` : '' }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <checkbox-popup :list="countryList" :checked="form.areas"
          @change="e => selectChange(e, 'areas')"></checkbox-popup>
      </el-popover>
      <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
        @show="selectShowChange('fansShow', true)" @hide="selectShowChange('fansShow', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.fans !== -1, active: form.fansShow }">
            <span class="font-14">{{ form.fans === -1 ? '粉丝量' : form.fans.toString().split('-').length > 1 ?
              form.fans : `${form.fans}以上` }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <radio-range-popup :list="data.fansList" :checked="form.fans" minPlaceholder="最小值" maxPlaceholder="最大值"
          @change="e => selectChange(e, 'fans')"></radio-range-popup>
      </el-popover>
      <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
        @show="selectShowChange('averageViewsShow', true)" @hide="selectShowChange('averageViewsShow', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.averageViews !== -1, active: selectShow.averageViewsShow }">
            <span class="font-14">{{ form.averageViews === -1 ? '平均观看量' :
              form.averageViews.toString().split('-').length > 1 ?
                form.averageViews : `${form.averageViews}以上` }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <radio-range-popup :list="data.averageViews" :checked="form.averageViews" minPlaceholder="最小值"
          maxPlaceholder="最大值" @change="e => selectChange(e, 'averageViews')"></radio-range-popup>
      </el-popover>
      <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
        @show="selectShowChange('averageInteractionRateShow', true)"
        @hide="selectShowChange('averageInteractionRateShow', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.averageInteractionRate !== -1, active: selectShow.averageInteractionRateShow }">
            <span class="font-14">{{ form.averageInteractionRate === -1 ? '平均互动率' :
              form.averageInteractionRate.toString().split('-').length > 1 ?
                `${form.averageInteractionRate.toString().split('-')[0]}%-${form.averageInteractionRate.toString().split('-')[1]}%`
                : `${form.averageInteractionRate}%以上` }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <radio-range-popup :list="data.averageInteractionRate" :checked="form.averageInteractionRate"
          minPlaceholder="最小值 %" maxPlaceholder="最大值 %"
          @change="e => selectChange(e, 'averageInteractionRate')"></radio-range-popup>
      </el-popover>
      <el-popover v-if="form.status !== 1" placement="bottom-start" :width="162" trigger="click" :show-arrow="false"
        @show="selectShowChange('contactStatus', true)" @hide="selectShowChange('contactStatus', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.contactStatus.length > 0, active: selectShow.contactStatusShow }">
            <span class="font-14">联系状态{{ form.contactStatus.length > 0 ? `(${form.contactStatus.length})` : '' }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <checkbox-popup1 :list="data.contactStatusList" :checked="form.contactStatus"
          @change="e => selectChange(e, 'contactStatus')"></checkbox-popup1>
      </el-popover>
      <el-popover v-if="form.status === null" placement="bottom-start" :width="148" trigger="click" :show-arrow="false"
        @show="selectShowChange('cooperationStage', true)" @hide="selectShowChange('cooperationStage', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.cooperationStage.length > 0, active: selectShow.cooperationStageShow }">
            <span class="font-14">合作阶段{{ form.cooperationStage.length > 0 ? `(${form.cooperationStage.length})` : ''
            }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <checkbox-popup1 :list="data.cooperationStageList" :checked="form.cooperationStage"
          @change="e => selectChange(e, 'cooperationStage')"></checkbox-popup1>
      </el-popover>
      <el-popover placement="bottom-start" :width="162" trigger="click" :show-arrow="false"
        @show="selectShowChange('followPerson', true)" @hide="selectShowChange('followPerson', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.followPerson.length > 0, active: selectShow.followPersonShow }">
            <span class="font-14">跟进人{{ form.followPerson.length > 0 ? `(${form.followPerson.length})` : '' }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <checkbox-popup1 :list="followPersonList" :checked="form.followPerson"
          @change="e => selectChange(e, 'followPerson')"></checkbox-popup1>
      </el-popover>
      <el-popover v-if="form.status !== 1" placement="bottom-start" :width="118" trigger="click" :show-arrow="false"
        @show="selectShowChange('email', true)" @hide="selectShowChange('email', false)">
        <template #reference>
          <div class="select-btn flex-between flex-align-items-center pointer"
            :class="{ selected: form.email > 0, active: selectShow.emailShow }">
            <span class="font-14">{{ form.email > 0 ? data.emailList.find(item => item.value === form.email).name
              : '是否有邮箱' }}</span>
            <i class="iconfont icon-xiajiantou"></i>
          </div>
        </template>
        <radio-popup :list="data.emailList" :checked="form.email" @change="e => selectChange(e, 'email')"></radio-popup>
      </el-popover>
      <div class="screen-btns flex">
        <p class="font-14 pointer" @click="clearScreen">清除</p>
        <p class="font-14 pointer">确定</p>
      </div>
    </div>

    <div class="screen-more flex flex-align-items-center">
      <div class="flex flex-align-items-center">
        <el-switch v-model="form.hasShortChain" size="small" />
        <span class="font-14">绑定有短链</span>
      </div>
      <div class="flex flex-align-items-center">
        <el-switch v-model="form.hasVideo" size="small" />
        <span class="font-14">绑定有视频</span>
      </div>
    </div>


    <template v-if="form.status !== 1">
      <el-table :data="sensationList" height="420" style="width: 100%;" class="table"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" fixed="left" />
        <el-table-column label="全选" width="180" fixed="left">
          <template #default="scope">
            <div class="row-name flex flex-align-items-center">
              <img :src="scope.row.avatar">
              <p class="font-16-B ellipsis-1">{{ scope.row.name }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属平台" width="100">
          <template #default="scope">
            <img :src="platformImg[scope.row.platform]" class="row-img">
          </template>
        </el-table-column>
        <el-table-column prop="location" label="国家" width="100" />
        <el-table-column prop="fans" label="粉丝量" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.fans, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="平均观看量" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.averageViews, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="平均点赞量" width="100">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.averageViews, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="平均互动率" width="100" />
        <el-table-column label="联系状态" width="140">
          <template #default="scope">
            <el-select :model-value="scope.row.contactStatus" @change="e => contactStatusChange(e, scope)">
              <el-option v-for="item in data.contactStatusList" :key="item.value" :label="item.name"
                :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="合作阶段" width="140">
          <template #default="scope">
            <el-select :model-value="scope.row.cooperationStage" @change="e => cooperationStageChange(e, scope)">
              <el-option v-for="item in data.cooperationStageList" :key="item.value" :label="item.name"
                :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="合作金额" width="100" />
        <el-table-column prop="averageInteractionRate" label="备注" width="100" />
        <el-table-column label="平台标签" width="220">
          <template #default="scope">
            <div v-if="scope.row.tags" class="row-tags flex">
              <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}</p>
              <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                <template #reference>
                  <div class="row-tag flex-center flex-align-items-center">
                    <i class="iconfont icon-gengduo"></i>
                  </div>
                </template>
                <div class="item-all-tags flex flex-wrap">
                  <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag }}
                  </p>
                </div>
              </el-popover>
            </div>
            <p v-else>-</p>
          </template>
        </el-table-column>
        <el-table-column label="自定义标签" width="220">
          <template #default="scope">
            <div v-if="scope.row.tags" class="row-tags flex">
              <p v-for="(item, index) in scope.row.tags.slice(0, 2)" :key="index" class="row-tag font-12">{{ item }}</p>
              <el-popover v-if="scope.row.tags.length > 2" width="320" placement="bottom" trigger="hover">
                <template #reference>
                  <div class="row-tag flex-center flex-align-items-center">
                    <i class="iconfont icon-gengduo"></i>
                  </div>
                </template>
                <div class="item-all-tags flex flex-wrap">
                  <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{ tag }}
                  </p>
                </div>
              </el-popover>
            </div>
            <p v-else>-</p>
          </template>
        </el-table-column>
        <el-table-column prop="averageInteractionRate" label="凡兔评分" width="100" />
        <el-table-column prop="averageInteractionRate" label="跟进人" width="100" />
        <el-table-column prop="averageInteractionRate" label="更新时间" width="170" />
        <el-table-column prop="averageInteractionRate" label="添加时间" width="170" />
      </el-table>
      <div class="pagination flex">
        <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
      </div>
    </template>

    <div v-else class="content flex-between">
      <div class="fall-item">
        <div class="item-title flex-between flex-align-items-center">
          <div class="item-title-left flex">
            <img src="@/assets/icon-11.png" />
            <span class="font-14">确认合作</span>
          </div>
          <el-dropdown :hide-on-click="false" trigger="click">
            <i class="item-title-right iconfont icon-paixu pointer"></i>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in sortList" :key="index">
                  <span :class="{ 'el-dropdown-active': item.value === form.confirmCooperationSort }">{{ item.name
                  }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="item-main flex-center flex-align-items-center">
          <no-data></no-data>
        </div>
      </div>
      <div class="fall-item">
        <div class="item-title flex-between flex-align-items-center">
          <div class="item-title-left flex">
            <img src="@/assets/icon-12.png" />
            <span class="font-14">内容制作中</span>
          </div>
          <el-dropdown :hide-on-click="false" trigger="click">
            <i class="item-title-right iconfont icon-paixu pointer"></i>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in sortList" :key="index">
                  <span :class="{ 'el-dropdown-active': item.value === form.contentProductionSort }">{{ item.name
                  }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="item-main flex-center flex-align-items-center">
          <no-data></no-data>
        </div>
      </div>
      <div class="fall-item">
        <div class="item-title flex-between flex-align-items-center">
          <div class="item-title-left flex">
            <img src="@/assets/icon-13.png" />
            <span class="font-14">待上线</span>
          </div>
          <el-dropdown :hide-on-click="false" trigger="click">
            <i class="item-title-right iconfont icon-paixu pointer"></i>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in sortList" :key="index">
                  <span :class="{ 'el-dropdown-active': item.value === form.toBeLaunchedSort }">{{ item.name }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="item-main flex-center flex-align-items-center">
          <no-data></no-data>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CheckboxPopup from '@/views/home/components/checkboxPopup.vue';
import RadioRangePopup from '@/views/home/components/radioRangePopup.vue';
import RadioPopup from '@/views/staging/components/radioPopup.vue';
import CheckboxPopup1 from '@/views/staging/components/checkboxPopup.vue';
import NoData from '@/components/noData.vue';
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import data from '@/js/data.js';
import numConvert from '@/js/numConvert';

const statusList = [
  {
    name: '全部',
    value: null,
    count: 2
  },
  {
    name: '合作中',
    value: 1,
    count: 0
  },
  {
    name: '合作完成',
    value: 2,
    count: 0
  }
];
const platformImg = {
  1: require('../../../../../assets/icon-1.png'),
  2: require('../../../../../assets/icon-2.png'),
  3: require('../../../../../assets/icon-3.png')
};
const sortList = [
  {
    name: '默认排序',
    value: undefined
  },
  {
    name: '按更新时间',
    value: 1
  },
  {
    name: '按添加时间',
    value: 2
  },
  {
    name: '按粉丝量',
    value: 3
  },
  {
    name: '按平均观看量',
    value: 4
  },
  {
    name: '按平均互动率',
    value: 5
  }
];

const form = ref({
  total: 100,
  status: null,
  keyword: '',
  platform: -1,
  cates: [],
  areas: [],
  fans: -1,
  averageViews: -1,
  averageInteractionRate: -1,
  contactStatus: [],
  cooperationStage: [],
  followPerson: [],
  email: -1,
  hasShortChain: false,
  hasVideo: false,
  confirmCooperationSort: undefined,
  contentProductionSort: undefined,
  toBeLaunchedSort: undefined
});
const selectShow = ref({
  platformShow: false,
  catesShow: false,
  areasShow: false,
  fansShow: false,
  averageViewsShow: false,
  averageInteractionRateShow: false,
  contactStatusShow: false,
  cooperationStageShow: false,
  followPersonShow: false,
  emailShow: false
});
const followPersonList = ref([
  {
    name: '谢谢',
    value: 1
  }
]);
const sensationList = ref([
  {
    id: 1,
    name: 'SpawnPoiint',
    platform: 1,
    channel: 'SpawnPoiint',
    avatar: 'https://www.wotohub.com/static/img/koc_default_man.8132f247.svg',
    tags: ['时尚生活', '科技', '数码电器', '时尚服饰'],
    location: '英国',
    score: 2.5,
    fans: 815324,
    averageViews: 654132,
    averageInteractionRate: '5.45%',
    business: 1051,
    collect: false,
    openEmail: true,
    proList: [
      {
        fileType: 'video',
        img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
        url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc'
      },
      {
        fileType: 'img',
        img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
        url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc'
      },
      {
        fileType: 'img',
        img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
        url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc'
      },
      {
        fileType: 'img',
        img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
        url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc'
      }
    ]
  }
]);
const cateList = ref([]);
const countryList = ref([]);

const statusChange = e => {
  if (form.value.status !== e) {
    form.value.status = e;
  }
}
const selectChange = (e, field) => {
  form.value[field] = e;
}
const selectShowChange = (field, value) => {
  selectShow.value[field] = value;
}
// 清除筛选条件
const clearScreen = () => {
  const newValue = {
    platform: -1,
    cates: [],
    areas: [],
    fans: -1,
    averageViews: -1,
    averageInteractionRate: -1,
    contactStatus: [],
    cooperationStage: [],
    followPerson: [],
    email: -1
  };
  form.value = {
    ...form.value,
    ...newValue
  }
}
// 修改联系状态
const contactStatusChange = (e, scope) => {
  console.log(e, scope)
}
// 修改合作阶段
const cooperationStageChange = (e, scope) => {
  console.log(e, scope)
}
// 获取红人分类
const queryCateList = () => {
  api.sensation.queryCateList().then(res => {
    cateList.value = res.map(item => {
      item.children = item.categories;
      return item;
    });
  });
}
// 获取国家列表
const queryCountryList = () => {
  api.sensation.queryCountryList().then(res => {
    countryList.value = res.filter(item => item.countries.length).map(item => {
      item.children = item.countries;
      return item;
    });
  });
}

onMounted(() => {
  queryCateList();
  queryCountryList();
});
</script>

<style lang="less" scoped>
.cooperate {
  background-color: #fff;
  border-radius: 20px;
  padding: 16px;
}

.operate-top {
  margin-bottom: 16px;

  .tab-nav-container {
    border: 1px solid #f2f2f2;
    border-radius: 10px;
    padding: 0 8px;
    height: 44px;

    p {
      padding: 0 16px;
      height: 32px;
      color: #666;
      line-height: 32px;

      &.active {
        border: 1px solid @main-color;
        color: @main-color;
        background: #ffedf1;
        border-radius: 8px;
        line-height: 30px;
      }
    }
  }

  .search {
    position: relative;

    &::v-deep .el-input {
      width: 320px;
      height: 44px;
    }

    p {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 44px;
      height: 100%;

      i {
        color: @main-color;
      }
    }
  }
}

.screen {
  padding-bottom: 16px;

  .select-btn {
    min-width: 118px;
    height: 32px;
    border-radius: 6px;
    background: #fff;
    padding-left: 12px;
    padding-right: 8px;
    margin-right: 8px;
    border: 1px solid #f2f2f2;
    margin-bottom: 16px;

    &.selected {
      background: #ffedf1;

      span,
      i {
        color: @main-color;
      }
    }

    &.active {
      background: #ffedf1;
      border: 1px solid @main-color;

      span,
      i {
        color: @main-color;
      }
    }

    span {
      color: #333;
    }

    i {
      color: #999;
      font-size: 12px;
    }
  }

  .screen-btns {
    margin-bottom: 16px;

    p {
      width: 64px;
      height: 32px;
      border-radius: 6px;
      text-align: center;
      line-height: 32px;

      &:first-child {
        color: #666;
        background: #f8f8f8;
      }

      &:last-child {
        margin-left: 8px;
        color: #fff;
        background: @main-color;
      }
    }
  }
}

.screen-more {
  height: 40px;
  margin-bottom: 10px;
  background: #f9f9f9;
  justify-content: end;

  &>div {
    margin-right: 24px;

    span {
      color: #333;
      padding-left: 8px;
    }
  }
}

.table {
  .row-name {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 16px;
    }
  }

  .row-img {
    width: 20px;
    height: 20px;
  }

  .row-tags {
    .row-tag {
      height: 24px;
      padding: 0 8px;
      background: hsla(0, 0%, 93%, .4);
      border-radius: 12px;
      border: 1px solid #dcdee0;
      color: #666;
      line-height: 24px;
      margin-right: 8px;
    }
  }
}

.pagination {
  justify-content: end;
  margin-top: 20px;
}

.content {
  .fall-item {
    width: 32%;

    .item-title {
      height: 44px;
      border-radius: 10px;
      padding: 0 16px;
      margin-bottom: 16px;

      &:nth-child(1) {
        background: #f852771a;
      }

      &:nth-child(2) {
        background: #3fa0ff1a;
      }

      &:nth-child(3) {
        background: #ffac041a;
      }

      .item-title-left {
        img {
          width: 22px;
          height: 22px;
          margin-right: 8px;
        }

        span {
          color: #333;
        }
      }

      .item-title-right {
        font-size: 18px;
        color: #bbb;
        outline: none !important;

        &.active {
          color: @main-color;
        }
      }
    }

    .item-main {
      height: 443px;
      border: 1px solid #f2f2f2;
      border-radius: 10px;
    }
  }
}

.item-all-tags {
  width: auto;
  padding: 10px;

  .item-all-tag {
    margin: 0 8px 10px 0;
    line-height: 24px;
    background: hsla(0, 0%, 93%, .4);
    border-radius: 12px;
    border: 1px solid #dcdee0;
    font-size: 12px;
    padding: 0 8px;
    color: #606266;
    white-space: nowrap;
  }
}

.el-dropdown-active {
  color: @main-color !important;
}
</style>
